<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="i.css">
  <title>apple watch dial 1</title>
  <style>
    .dial-style1{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      padding: 5px;
      font-weight: bolder;
      font-family: FangzhengRZY;
      user-select: none;
    }
    .dial-style1 .hour{
      color: #ff6748;
      font-size: 65px;
      transform: scaleX(2) scaleY(1.5);
      transform-origin: 100%;
      margin-top: 12px;
    }
    .dial-style1 .minute{
      color: #f4aca5;
      font-size: 70px;
      transform: scaleX(2);
      transform-origin: 100%;
      transform: scaleX(2) scaleY(1.5);
      margin-top: 18px;
    }
  </style>
</head>
<body>

  <div class="watch">
    <div class="dial dial-style1">
      <div class="hour">-</div>
      <div class="minute">-</div>
    </div>
  </div>
  
  <script src="i.js"></script>
  <script>

    function renderTime() {
      var now = new Date()
      var hours = now.getHours()
      var minutes = now.getMinutes()
      var hourEl = document.querySelector('.hour')
      var minuteEl = document.querySelector('.minute')
  
      $(hourEl).text(hours < 10 ? '0' + hours : hours)
      $(minuteEl).text(minutes < 10 ? '0' + minutes : minutes)
    }
    
    renderTime()

    setInterval(function() {
      renderTime()
    }, 10000)
  </script>
</body>
</html>